<template>
	<view>
		<view class="seller-view" v-for="(item, index) in 2" :key="index">
			<view class="seller-info u-flex u-row-between">
				<view class="seller-name">
					<view class="name">店铺名字</view>
				</view>
				<view class="order-sn">新投诉</view>
			</view>
			<u-line color="#DCDFE6"></u-line>
			<view class="goods-item-view">
				<view class="goods-img" @click="handleToGoods()">
					<u-image border-radius="6" width="131rpx" height="131rpx" src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0f423fb60f084b2caade164fae25a9a0.png"></u-image>
				</view>
				<view class="goods-info" @click="handleToGoods()">
					<view class="goods-title u-line-2">商品名字</view>
					<view class="goods-price">
						￥11
					</view>
				</view>
				<view class="goods-num">
					<view>x2</view>
				</view>
			</view>
			<view class="complain-item-view">
				<view class="complain-time"> 2023-09-08 11：11：11 </view>
				<view class="complain-speak">投诉主题 </view>
			</view>
			<view class="complain-btn">
				<u-tag mode="plain" @click="handleClear()" class="complain-tag" text="撤销投诉" type="info" />
				<u-tag mode="plain" @click="handleInfo()" class="complain-tag" text="投诉详情" type="info" />
			</view>
		</view>

		<!-- <u-empty :style="{'marginTop':complaionDetail.total == 0 ? '200rpx':'0rpx'}" class="empty" style=""
			text="暂无投诉列表" mode="list"></u-empty> -->

		<u-modal show-cancel-button @confirm="handleClearConfirm" v-model="show" :content="content"></u-modal>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				show: false,
				content: "是否撤销投诉？",
				complaionDetail: "", //返回的整个response
			};
		},
		mounted() {
		},
		
		methods: {
			// 点击跳转到商品
			handleToGoods() {
				uni.navigateTo({
					url: "/pages/product/goods",
				});
			},

			/**
			 * 点击撤销投诉
			 */
			handleClear(val) {
				this.show = true;
			},
			
			handleClearConfirm() {
				console.log('撤销投诉')
			},

			/**
			 * 查看详情
			 */
			handleInfo(val) {
				uni.navigateTo({
					url: "./complainInfo",
				});
			},

		},
	};
</script>

<style lang="scss" scoped>
	@import "../goods.scss";

	.complain-item-view {
		border-bottom: 2rpx solid #f5f7fa;
		border-top: 2rpx solid #f5f7fa;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.complain-time {
		font-size: 24rpx;
		color: #999;
	}

	/deep/ .seller-name {
		width: auto !important;
	}

	.complain-btn {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 30rpx;
	}

	.complain-tag {
		margin-left: 10rpx;
	}

	.empty {
		margin-top: 40rpx;
	}
</style>
